<template>
	<view class="lifeOrderDetails">
		<view class="mian">
			<view class="top">
				<view class="topBg" v-if="data.orderState == 'COMPLETE' || data.orderState == 'WAIT_RECEIVE'">
					您的订单分成多个包裹发出：
					<view class="">
						<view class="topItem" :class="data.index == index?'active':''"
							@tap="data.index = index,data.emsInfoDTOS = item"
							v-for="(item,index) in data.info.emsInfoDTOS" :key="index">
							<view class="left">
								包裹({{index+1}})
								<text>共1件</text>
							</view>
							<view class="right">
								<image :src="item.expressCompanyLogo" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="wuliuInfo" v-if="data.orderState == 'COMPLETE' || data.orderState == 'WAIT_RECEIVE'">
					<view class="" @tap="navToLogistics">
						<view class="left">
							<view class="">
								<image src="/static/img/index/136.png" mode="widthFix"></image>
								物流信息
							</view>
							{{data.emsInfoDTOS.theLastMessage}}
						</view>
						<image src="/static/img/index/20.png" mode="widthFix"></image>
					</view>

				</view>
				<view class="address">
					<image src="/static/img/index/106.png" mode="widthFix"></image>
					<view class="right">
						<view class="">
							{{data.info.orderAddress.rcvName}}
							<text>{{data.info.orderAddress.rcvPhone}}</text>
						</view>
						{{data.info.orderAddress.address}}
					</view>
				</view>
			</view>
			<view class="goods">
				<view class="goodsList" v-for="(item,index) in data.info.orders" :key="index">
					<view class="top">
						<view class="left">
							<view class="img">
								<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item.storeLogo"
									mode="aspectFill"></image>
							</view>
							{{item.sellStoreName}}
							<text @tap.stop="contactMerchant(item)">商家</text>
							<text @tap.stop="contactMerchant1(item)">平台客服</text>
						</view>
						<view class="right" :class="item.orderState.value">
							{{item.orderState.name}}
						</view>
					</view>
					<view @tap="handeClick(item1)" class="listItem" v-for="(item1,index1) in item.orderProducts"
						:key="index">
						<view class="top">
							<view class="left">
								<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item1.productPicture"
									mode="aspectFill"></image>
							</view>
							<view class="center">
								<text class="ellipsis_2">{{item1.productName}}</text>
								<text>{{item1.specName}}（{{item1.specValue}}）</text>
								<view class="attr">
									<text v-for="(item2,index2) in item1.attrs || []"
										:key="index2">{{item2.propertyName}}：{{item2.propertyValue}};</text>
								</view>
							</view>
							<view class="right">
								<!-- <text>实付￥{{item1.productAmount}}</text> -->
								<text>￥{{item1.productAmount}}</text>
								<text>x {{item1.num}}</text>
							</view>
						</view>
						<view class="wcbot"
							v-if="item.orderState.value == 'COMPLETE' || item.orderState.value == 'WAIT_RECEIVE'">
							<!-- 已完成 和 已发货 待收货 -->
							<text @tap.stop="handeTk(item1)">{{item1.lastRefundDTO?'退款详情':'申请退款'}}</text>
							<text @tap.stop="addCart(item1)">加入购物车</text>
						</view>
						<view class="dfhbot" v-else-if="item.orderState.value == 'WAIT_SEND'">
							<!-- 待发货 -->
							<text @tap.stop="handeTk(item1)">{{item1.lastRefundDTO?'退款详情':'申请退款'}}</text>
							<text @tap.stop="addCart(item1)">加入购物车</text>
						</view>
						<view class="bot" v-else-if="item.orderState.value == 'CANCEL'">
							<text @tap.stop="addCart(item1)">加入购物车</text>
						</view>
					</view>
				</view>
			</view>

			<view class="info">
				<view class="item">
					订单编号:
					<text>{{data.info.groupOrderNo}}</text>
				</view>
				<view class="item">
					下单时间:
					<text>{{data.info.createTime}}</text>
				</view>
				<view class="item">
					支付时间:
					<text>{{data.info.payTime}}</text>
				</view>
				<view class="item">
					支付方式:
					<text>{{data.info.payChannel}}</text>
				</view>
				<view class="item">
					商品总额:
					<text>{{data.info.totalProductAmount}}</text>
				</view>
				<view class="item">
					运费:
					<text>{{data.info.totalFreightAmount}}</text>
				</view>
				<view class="item">
					优惠券:
					<text>{{data.info.couponAmount}}</text>
				</view>
				<view class="bot">
					实付金额:<text>￥{{data.info.totalPayAmount}}</text>
				</view>
			</view>
		</view>

		<!-- 	<view class="dsbot" v-if="data.orderState == 'WAIT_RECEIVE'">
			<text @tap="handeSh">确认收货</text>
		</view> -->
		<view class="dfkbot" v-if="data.orderState == 'WAIT_PAY'">
			<text  @tap="cancellationOrder">取消订单</text>
			<text  @tap="data.show = true,data.isCoupon = false">去支付</text>
		</view>
		<u-popup :round="20" :zIndex="9999" :show="data.show" @close="data.show = false">
			<view class="confirmOrderBottom" v-if="!data.isCoupon">
				<view class="top">
					<text></text>
					支付
					<image @tap="data.show = false" src="/static/img/index/101.png" mode="widthFix"></image>
				</view>
				<view class="confirmOrderBottom_1">
					<view v-for="(item,index) in paymentChannels" :key="index" class=""
						@tap="data.payChannel = item.value">
						<view class="left">
							<image :src="'/static/img/index/'+item.icon+'.png'" mode="widthFix"></image>
							{{item.name}}
						</view>
						<image
							:src="data.payChannel == item.value?'/static/img/index/49.png':'/static/img/index/52.png'"
							mode="widthFix">
						</image>
					</view>
				</view>
				<view class="coupon" @tap="handeClick2">
					优惠券
					<view class="">
						{{data.couponCode && data.listCoupons.filter(item=>item.bool).length && '- '+data.listCoupons.filter(item=>item.bool)[0].couponAmount}}
						<image  src="/static/img/index/20.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="bot">
					<view class="left">
						实付现金（元）
						<text>{{subtract(data.info.totalPayAmount,data.couponCode?data.listCoupons.filter(item=>item.bool)[0].couponAmount:0)}}</text>
					</view>
					<view class="right" @tap="pay">
						立即支付
					</view>
				</view>
			</view>
			<view class="couponPopup" v-else>
				<view class="couponPopupTop">
					<view class="">
					
					</view>
					优惠券
					<image @tap="data.isCoupon = false" src="/static/img/index/198.png" mode="widthFix"></image>
				</view>
				<scroll-view scroll-y="true">
					<view class="list">
						<view @tap="handeClick3(item)" class="listItem" v-for="(item,index) in data.listCoupons" :key="index">
							<image :src="item.bool?'/static/img/freeShipping/16.png':'/static/img/freeShipping/17.png'" mode="widthFix"></image>
							<view class="bot">
								<view class="left">
									<text>免单购券</text>
									<view class="left_1">
										<text class="amount">{{item.couponAmount}}</text>
										{{item.couponName}}
									</view>
									<view class="right_1">
										<text>累计免单金额</text>
										{{item.createTime}}-{{item.invalidTime}}
									</view>
								</view>
								<view class="right">
									<text>无门槛</text>
									<text>全平台通用</text>
									<!-- <text>立即使用</text> -->
								</view>
							</view>
					
						</view>
					</view>
				</scroll-view>
				<view class="bot">
					<text @tap="handeClick1">确定</text>
				</view>
			</view>
		</u-popup>
		<SanshuiPaymentPassword v-if="data.show1" :onConfirm="data.onConfirm" :onCancel="()=>{data.show1 = false}" />
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import SanshuiPaymentPassword from '@/components/sanshui-payment-password/sanshui-payment-password.vue'
	import {
		reactive
	} from 'vue';
	import {listUserCoupons} from '@/utils/api/freeShipping'
	import { paymentChannels, payment } from '@/utils/index'
	import { orderDetailByGroupOrder, insertShoppingCar, cancelOrder, receiveOrder, payOrder } from '@/utils/api/goods'
	const data = reactive<any>({
		orderState: '',
		httpUrl: getApp().globalData.baseUrl,
		info: {},
		emsInfoDTOS: {},
		index: 0,
		onConfirm: () => { },
		payChannel: paymentChannels[0].value,
		groupOrderNo: '',
		listCoupons:[]
	})
	onLoad(({ groupOrderNo, orderState }) => {
		data.orderState = orderState;
		data.groupOrderNo = groupOrderNo;
	})
	onShow(() => {
		info(data.groupOrderNo)
	})
	listUserCoupons().then((res)=>{
		data.listCoupons = res.data;
	})
	const contactMerchant = (item)=>{
		const conversationID = `C2C${item.sellUserId}`;
		uni.navigateTo({ url: `/pages/TUIKit/components/TUIChat/index?conversationID=${conversationID}&userId=${item.sellUserId}&trendsId=${item.orderNo}&areaType=order` });
	}
	const contactMerchant1=(item)=>{
		const conversationID = `C2C${data.info.platformServiceUserId}`;
		uni.navigateTo({ url: `/pages/TUIKit/components/TUIChat/index?conversationID=${conversationID}&userId=${data.info.platformServiceUserId}&trendsId=${item.orderNo}&areaType=order` });
	}
	const handeClick3 = (item)=>{
		data.listCoupons.map((item1)=>{
			if(item.id == item1.id){
				item.bool = !item.bool
			}else{
				item1.bool = false
			}
		})
	}
	const subtract = (num1, num2)=>{
	  const multiplier = Math.pow(10, Math.max(decimalLength(num1), decimalLength(num2)));
	  return ((num1 * multiplier - num2 * multiplier) / multiplier)*1<0?0:(num1 * multiplier - num2 * multiplier) / multiplier;
	}
	const decimalLength = (num)=>{
	  return (num.toString().split('.')[1] || '').length;
	}
	const handeClick2 = ()=>{
		data.listCoupons.map((item)=>{
			item.bool = false;
			if(item.couponCode == data.couponCode){
				item.bool = true
			}
		})
		data.isCoupon = true;
	}
	const handeClick1 = ()=>{
		const item = data.listCoupons.find(item=>item.bool);
		if(item){
			data.couponCode = item.couponCode;
		}else{
			data.couponCode = '';
		}
		data.isCoupon = false;
	}
	const handeClick = (item) => {
		uni.navigateTo({
			url: '/pages/lifestyleProducts/index?id=' + item.spuId
		})
		console.log(item, 'item')
	}
	const handeTk = (item) => {
		if (item.lastRefundDTO) {
			if (item.lastRefundDTO.refundType.value == "ONLY_REFUND") {
				//仅退款
				uni.navigateTo({
					url: '/pages/buyerRefundDetails/refund?refundNo=' + item.lastRefundDTO.refundNo + '&refundState=' + item.lastRefundDTO.refundState.value
				})
			} else {
				//退货
				uni.navigateTo({
					url: '/pages/buyerRefundDetails/returnGoods?refundNo=' + item.lastRefundDTO.refundNo + '&refundType=' + item.lastRefundDTO.refundType.value + '&refundState=' + item.lastRefundDTO.refundState.value
				})
			}

		} else {
			uni.navigateTo({
				url: '/pages/requestRefund/index'
			})
			setTimeout(() => {
				uni.$emit('requestRefund', { ...item, groupOrderNo: data.info.groupOrderNo })
			}, 500)
		}
	}
	const info = (groupOrderNo) => {
		orderDetailByGroupOrder({ data: { groupOrderNo } }).then((res) => {
			console.log(res.data, 'res.data')
			res.data.orders.map((item) => {
				item.orderProducts.map((item1) => {
					if (item1.lastRefundDTO && (item1.lastRefundDTO.refundState.value == "CANCEL")) {
						item1.lastRefundDTO = null
					}
				})
			})

			data.info = res.data;
			data.orderState = res.data.orderState.value
			if (data.info.emsInfoDTOS.length) {
				data.emsInfoDTOS = data.info.emsInfoDTOS[0];
			}
		})
	}
	const pay = () => {
		data.show = false;
		if (data.payChannel == 'WALLET') {
			data.show1 = true
			data.onConfirm = (e) => {
				uni.showLoading({
					title: '加载中...',
					mask: true
				})
				payOrder({ data: { orderNo: data.info.groupOrderNo, payChannel: data.payChannel, payPwd: e,coupouCode:data.couponCode } }).then((res) => {
					if (res.code == 200) {
						payment(data.payChannel, res.data).then((res) => {
							uni.$emit('orderList')
							info(data.groupOrderNo)
						})
						uni.hideLoading()
					}
				})
			}
			return
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		payOrder({ data: { orderNo: data.info.groupOrderNo, payChannel: data.payChannel } }).then((res) => {
			if (res.code == 200) {
				payment(data.payChannel, res.data).then((res) => {
					uni.$emit('orderList')
					info(data.groupOrderNo)
				})
				uni.hideLoading()
			}
		})
	}
	const navToLogistics = () => {
		uni.navigateTo({
			url: '/pages/logistics/index?id=' + data.info.groupOrderNo + '&number=' + data.emsInfoDTOS.number
		})
	}
	const handeSh = () => {
		uni.showModal({
			title: '提示',
			content: '是否收货?',
			success: (e) => {
				if (e.confirm) {
					receiveOrder({ data: { groupOrderNo: data.info.groupOrderNo } }).then((res) => {
						console.log(res, 'ress')
						if (res.code == 200) {
							uni.showToast({
								title: '收货成功!',
								icon: 'none'
							})
							info(data.info.groupOrderNo)
						}
					})
				}
			}
		})
	}
	const cancellationOrder = () => {
		uni.showModal({
			title: '提示',
			content: '是否取消订单?',
			success: (e) => {
				if (e.confirm) {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					cancelOrder({ data: { groupOrderNo: data.info.groupOrderNo } }).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '取消订单成功!',
								icon: 'none'
							})
							info(data.info.groupOrderNo)
						}
					})
				}
			}
		})

	}
	const addCart = (item) => {
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		insertShoppingCar({ data: { skuId: item.skuId, num: item.num } }).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: '添加成功!',
					icon: 'none'
				})
			}
		})
	}
</script>

<style lang="scss">
	.coupon {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 0;
		border-radius: 24rpx;
		width: 100%;
		background: #fff;
		margin-top: 20rpx;
		view{
			color: #FF263F;
			display: flex;
			align-items: center;
		}
		image {
			width: 38rpx;
		}
	}
	.couponPopup {
		background: #F4F6FA;
		border-radius: 24rpx 24rpx 0 0;
		.couponPopupTop {
			padding: 24rpx 32rpx 0 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 36rpx;
			
			view {
				width: 32rpx;
			}
	
			image {
				width: 32rpx;
			}
		}
	
		>.bot {
			padding: 12rpx 50rpx 30rpx 50rpx;
			background-color: #fff;
	
			text {
				display: flex;
				width: 100%;
				height: 88rpx;
				align-items: center;
				justify-content: center;
				border-radius: 44rpx;
				color: #fff;
				background-color: #FF263F;
				font-size: 32rpx;
			}
		}
	
		scroll-view {
			height: 800rpx;
			overflow: auto;
			padding: 24rpx 32rpx;
		}
	
		.list {
			>view:nth-of-type(1) {
				margin-top: 0;
			}
		}
	
		.listItem {
			margin-top: 24rpx;
			// display: flex;
			>image{
				width: 	36rpx;
			}
			.bot {
				margin-top: 20rpx;
				display: flex;
				height: 200rpx;
				border-radius: 24rpx;
				overflow: hidden;
				background: #fff;
	
				>.left {
					flex: 1;
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
	
					padding: 0 20rpx;
	
					>image {
						width: 180rpx;
						position: absolute;
						right: -30rpx;
						top: -70rpx;
					}
	
					>text {
						padding: 2rpx 12rpx;
						border-radius: 20rpx 0 20rpx 0;
						background: #FFD7AF;
						color: #C97210;
						font-size: 24rpx;
						position: absolute;
						left: 0;
						top: 0;
					}
	
					.left_1 {
						display: flex;
						align-items: center;
	
						.amount {
							color: #FF263F;
							font-size: 64rpx;
							width: 180rpx;
	
							&:before {
								content: '￥';
								font-size: 36rpx;
								font-weight: bold;
								color: #FF263F;
							}
						}
					}
	
					.right_1 {
						display: flex;
						align-items: center;
						color: #8C8C8C;
						font-size: 20rpx;
	
						text {
							color: #8C8C8C;
							font-size: 20rpx;
							width: 180rpx;
						}
					}
				}
	
				>.right {
					background: linear-gradient(251deg, #FF3E61 0%, #FA2D1C 100%);
					box-shadow: -8rpx 0rpx 32rpx 0rpx rgba(255, 57, 43, 0.2);
					width: 246rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
	
					text:nth-of-type(1) {
						font-size: 36rpx;
						color: #fff;
					}
	
					text:nth-of-type(2) {
						color: rgba(255, 255, 255, .8);
						font-size: 22rpx;
						margin: 10rpx 0;
					}
	
					text:nth-of-type(3) {
						padding: 2rpx 16rpx;
						border-radius: 16rpx;
						background: #fff;
						color: #FA2D1C;
						font-size: 24rpx;
					}
				}
			}
	
		}
	}
	.attr {

		text {
			font-size: 24rpx;
			color: #8C8C8C;
			display: inline-block;
			margin-right: 10rpx;
			margin: 0 !important;
		}
	}

	.confirmOrderBottom {
		padding: 24rpx 43rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 30rpx;
			}

			text {
				width: 30rpx;
			}

			font-size: 32rpx;
		}

		.bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.left {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;

				text {
					margin-top: 10rpx;
					color: #FF263F;
				}
			}

			.right {
				width: 190rpx;
				line-height: 80rpx;
				background: #FF263F;
				text-align: center;
				border-radius: 80rpx;
				color: #fff;

			}
		}
	}

	.confirmOrderBottom_1 {
		>view {
			justify-content: space-between;
			// padding: 37rpx 35rpx;
			background: #fff;
			display: flex;
			align-items: center;
			margin-top: 32rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					margin-right: 25rpx;
				}

				font-size: 24rpx;
			}

			>image {
				width: 36rpx;
			}
		}
	}

	.lifeOrderDetails {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background: #F5F5F5;

		>.mian {
			flex: 1;
			overflow: auto;
			margin: 24rpx;

			.info {
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;

				.item {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 32rpx;
					color: #8C8C8C;
				}

				.bot {
					border-top: 1rpx solid #F0F0F0;
					padding-top: 40rpx;
					text-align: right;

					text {
						color: #6B64D3;
						font-size: 36rpx;
						display: inline-block;
						margin-left: 16rpx;
					}
				}
			}

			.goods {
				border-radius: 24rpx;
				background-color: #fff;
				margin: 24rpx 0;
			}

			.goodsList {
				padding: 24rpx;

				>.top {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						font-size: 32rpx;

						.img {
							width: 48rpx;
							height: 48rpx;
							border-radius: 50%;
							background: #ccc;
							margin-right: 16rpx;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						text{
							padding: 5rpx 10rpx;
							border-radius: 100rpx;
							border: 2rpx solid #D9D9D9;
							margin-left: 10rpx;
						}
					}

					.right {
						color: #6B64D3;
					}

					.WAIT_SEND,
					.WAIT_PAY {
						color: #FF8C00;
					}

					.CANCEL,
					.COMPLETE {
						color: #8C8C8C;
					}
				}

				.listItem {
					margin-top: 24rpx;

					.top {
						display: flex;
						align-items: flex-start;

						.left {
							width: 160rpx;
							height: 160rpx;
							border-radius: 24rpx;
							background: #ccc;

							image {
								width: 100%;
								height: 100%;
								border-radius: 24rpx;
							}
						}

						.center {
							flex: 1;
							margin: 0 24rpx;
							display: flex;
							flex-direction: column;

							text:nth-of-type(2) {
								font-size: 24rpx;
								color: #8C8C8C;
								margin: 10rpx 0;
							}
						}

						.right {
							display: flex;
							flex-direction: column;
							align-items: flex-end;

							text:nth-of-type(1) {
								font-size: 24rpx;
								color: #8C8C8C;
								margin-bottom: 10rpx;
							}

							text:nth-of-type(2) {
								font-size: 20rpx;
								color: #8C8C8C;
							}
						}
					}

					.wcbot,
					.dfhbot,
					.bot {
						display: flex;
						justify-content: flex-end;
						margin-top: 16rpx;

						text {
							width: 160rpx;
							line-height: 64rpx;
							text-align: center;
							border-radius: 64rpx;
						}

						text:nth-of-type(1) {
							border: 2rpx solid #D9D9D9;
							margin-right: 16rpx;
						}

						text:nth-of-type(2) {
							color: #6B64D3;
							border: 2rpx solid #6B64D3;
						}
					}

					.bot {
						text:nth-of-type(1) {
							color: #6B64D3;
							border-color: #6B64D3;
							margin-right: 0;
						}
					}

					.wcbot {
						text:nth-of-type(1) {
							border: 2rpx solid #D9D9D9;
							color: #262626;
							margin-right: 16rpx;
						}

						text:nth-of-type(2) {
							color: #6B64D3;
							border: 2rpx solid #6B64D3;
						}
					}
				}
			}

			>.top {
				background: #fff;
				padding: 24rpx;
				border-radius: 24rpx;
			}

			.wuliuInfo {
				padding-bottom: 32rpx;
				border-bottom: 2rpx dashed #F0F0F0;
				margin-bottom: 32rpx;

				>view {
					background: #F5F5F5;
					border-radius: 16rpx;
					padding: 16rpx;
					display: flex;
					align-items: center;

					>image {
						width: 28rpx;
					}

					.left {
						font-size: 24rpx;
						color: #595959;
						flex: 1;
						margin-right: 20rpx;

						view {
							display: flex;
							align-items: center;
							margin-bottom: 10rpx;

							image {
								width: 48rpx;
								margin-right: 8rpx;
							}
						}
					}
				}

			}

			.address {
				display: flex;
				align-items: center;

				>image {
					width: 48rpx;
					margin-right: 16rpx;
				}

				.right {
					flex: 1;

					view {
						margin-bottom: 17rpx;
						font-size: 32rpx;

						text {
							font-size: 24rpx;
							display: inline-block;
							margin-left: 8rpx;
						}
					}
				}
			}

			.topBg {
				font-size: 24rpx;
				padding-bottom: 32rpx;
				border-bottom: 2rpx dashed #F0F0F0;
				margin-bottom: 32rpx;

				>view {
					display: flex;

				}

				.topItem {
					display: flex;
					align-items: center;
					padding: 14rpx 21rpx;
					border-radius: 16rpx;
					border: 2rpx solid #F0F0F0;
					margin-top: 24rpx;
					margin-right: 24rpx;

					.left {
						display: flex;
						flex-direction: column;
						font-size: 32rpx;

						text {
							color: #BFBFBF;
							font-size: 24rpx;
						}
					}

					.right {
						width: 96rpx;
						height: 96rpx;
						margin-left: 32rpx;
						border-radius: 8rpx;
						background: #ccc;

						image {
							border-radius: 8rpx;
							width: 100%;
							height: 100%;
						}
					}

				}

				.active {
					.left {
						color: #6B64D3;
					}

					border-color: #6B64D3;
				}
			}
		}

		>.dsbot,
		.dfkbot {
			padding: 18rpx 32rpx;
			display: flex;
			justify-content: flex-end;
			background: #fff;

			text {
				// width: 180rpx;
				padding: 0 20rpx;
				line-height: 64rpx;
				text-align: center;
				border-radius: 64rpx;
				border: 2rpx solid #6B64D3;
				color: #6B64D3;
			}
		}

		.dfkbot {
			text:nth-of-type(1){
				border-color: #D9D9D9;
				color: #262626;
				margin-right: 16rpx;
			}
		}
	}
</style>